<template>
  <div class="layui-fluid">
    <div class="layui-card">
      <div
        class="layui-form layui-card-header layuiadmin-card-header-auto"
        style="padding: 15px 15px 0px 15px"
      >
        <div class="layui-row">
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">流程分类</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="model.username"
                  placeholder="请输入流程分类"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">流程名称</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="model.name"
                  placeholder="请输入流程名称"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label">流程标识</label>
              <div class="layui-input-block">
                <input
                  type="text"
                  v-model.trim="model.key"
                  placeholder="请输入流程标识"
                  class="layui-input"
                />
              </div>
            </div>
          </div>
          <div class="layui-col-md3">
            <div class="layui-form-item">
              <label class="layui-form-label" style="padding: 0"
                ><button class="layui-btn" lay-filter="search">
                  <i
                    class="layui-icon layui-icon-search layuiadmin-button-btn"
                  ></i></button
              ></label>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-card-body">
        <div style="padding-bottom: 10px">
          <button
            class="layui-btn layui-btn-sm layuiadmin-btn-admin"
            layui-filter="add"
          >
            <i class="layui-icon">&#xe608;</i>
            新增模型
          </button>
          <button
            class="layui-btn layui-btn-sm layui-btn-danger"
            layui-delete="deleteModel"
            field="id"
            table=" "
          >
            <i class="layui-icon">&#xe640;</i>
            删除所选模型
          </button>
        </div>
        <table id="dataTable"></table>
      </div>
    </div>
    <Transfer
      ref="repelProcess"
      :key="timer"
      :options="transferOptions"
    ></Transfer>
    <div id="barDemo" style="display: none">
      <a
        class="layui-btn layui-btn-normal layui-btn-xs"
        lay-event="mutualRepelProcess"
        >互斥流程</a
      >
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-xs" lay-event="deploy">部署</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
        >删除</a
      >
    </div>
  </div>
</template>
<script>
import Transfer from "../../common/Transfer.vue";
export default {
  name: "Model",
  components: { Transfer },
  data: function () {
    return {
      model: {},
      modelCols: [
        [
          {
            type: "checkbox",
            field: "id",
            align: "center",
          },
          {
            field: "category",
            title: "模型分类",
            align: "center",
          },
          {
            field: "key",
            title: "模型标识",
            align: "center",
          },
          {
            field: "name",
            title: "模型名称",
            align: "center",
          },
          {
            width: 80,
            field: "revision",
            title: "版本号",
            align: "center",
          },
          {
            field: "createTime",
            title: "创建时间",
            align: "center",
            templet:
              "<div>{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd- HH:mm:ss')}}</div>",
          },
          {
            field: "lastUpdateTime",
            title: "最后更新时间",
            align: "center",
            templet:
              "<div>{{layui.util.toDateString(d.lastUpdateTime, 'yyyy-MM-dd- HH:mm:ss')}}</div>",
          },
          {
            title: "XML内容",
            align: "center",
            width: 100,
            templet: function (res) {
              return "<span><a href='javascript:void(0)' lay-event='modelExport'><i class='layui-icon layui-icon-fonts-html' style='font-size: 40px;color:#01AAED'></i></a></span>";
            },
          },
          {
            fixed: "right",
            title: "操作",
            align: "center",
            toolbar: "#barDemo",
          },
        ],
      ],
      repelModelCols: [
        [
          {
            type: "checkbox",
            field: "id",
            align: "center",
          },
          {
            type: "checkbox",
            field: "key",
            align: "center",
          },
        ],
      ],
      transferOptions: {
        title: ["所有流程", "互斥流程"],
      },
      timer: new Date().getTime(),
    };
  },
  created: function () {
    window.saveRepelProcess = this.saveRepelProcess;
  },
  mounted: function () {
    this.initLayui();
    this.queryModelList();
  },
  methods: {
    queryModelList: function (where) {
      if (this.checkIsNull(where)) {
        where = {};
      }
      var obj = {};
      obj.url = this.activitiModel + "/modelList";
      obj.cols = this.modelCols;
      obj.tableId = "dataTable";
      obj.where = where;
      this.renderTable(obj); //其中url tableId以及cols为必传其他参数个性化参数请参考layui数据表格
    },
    edit: function (data, obj) {
      window.open("/static/activiti/modeler.html?modelId=" + data.id);
    },
    deploy: function (data, obj) {
      var that = this;
      this.post(
        this.activitiModel + "/deploy",
        {
          modelId: data.id,
        },
        function (res) {
          console.log(res);
          if (res.code == "000000") {
            that.openMsg(res.msg, true);
          } else {
            that.showMsg(res.msg, false);
          }
        }
      );
    },
    modelExport: function (data, obj) {
      var that = this;
      this.post(
        this.activitiModel + "/export",
        {
          modelId: data.id,
        },
        function (res) {
          if (res.code == "000000") {
            that.openContent({
              title: data.name + "流程XML",
              content: "<xmp>" + res.result + "</xmp>",
            });
          } else {
            that.showMsg(res.msg, false);
          }
        }
      );
    },
    mutualRepelProcess: function (data, e) {
      var that = this;
      this.openConfirm(
        "互斥流程可以包含所有的流程，并且互斥流程是通过受理人、候选人或候选组进行匹配，互斥流程使用流程标识符进行关联，只进行单向关联，若需要进行双向关联需要进行双向配置。确认需要进行操作吗？",
        function (index) {
          that.closeOpen(index);
          that.openPage({
            title: data.name + "互斥流程",
            url: "/activiti/act/model/repelProcess?modelKey=" + data.key,
          });
        }
      );
    },
    saveRepelProcess: function (key) {},
  },
  updated: function () {},
};
</script>